import { useEffect } from "react";
import { Space, Popconfirm, Table, message, Divider } from "antd";
import { ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconDelete } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";

import useHelperOrganizationApplication from "../../helper/useHelperOrganizationApplication";

import useUpdateApplication from "../../hooks/application/organization/useUpdateApplication";
import { useOrganizationDatabase } from "../../hooks/databases";

const DependentedDatabases = ({ application, reloadData }) => {
    const { openAddApplicationDatabaseModal, openUpdateApplicationDatabaseModal } = useHelperOrganizationApplication();
    const { loadDatabases, databases } = useOrganizationDatabase();
    const { updateApplication } = useUpdateApplication();

    const state = useReactive({
        loading: false,
        submitLoading: false,
        appDatabases: application.appData || [],
    });

    useEffect(() => {
        loadDatabases();
    }, []);

    useEffect(() => {
        state.appDatabases = application.appData || [];
    }, [application]);

    const addDatabase = async (appData) => (state.appDatabases = appData);

    const removeDatabase = async (record) => {
        let appData = state.appDatabases.filter((item) => item.uuid !== record.uuid);
        let variables = {
            appUpti: new Date().getUTCTime(),
            appData,
        };
        updateApplication(application.appUuid, variables, (res) => {
            if (res) {
                message.success("成功更新应用信息");
                addDatabase(appData);
                reloadData && reloadData();
            }
        });
    };

    const TableHeader = () => {
        return (
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ lineHeight: "32px" }}>依赖的数据库模型信息</div>
                <ButtonGroup>
                    <Button
                        icon={<IconPlusCircle />}
                        onClick={() => openAddApplicationDatabaseModal({ application, databases, addDatabase, reloadData, appDatabases: state.appDatabases })}
                    >
                        添加依赖的数据库模型
                    </Button>
                </ButtonGroup>
            </div>
        );
    };

    return (
        <Table loading={state.loading} title={TableHeader} dataSource={state.appDatabases || []} rowKey="uuid" size="small" bordered pagination={false}>
            <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
            <Table.Column title="数据库模型名称" dataIndex="databaseName" align="left" />
            <Table.Column title="数据库模型说明" dataIndex="title" align="left" />
            <Table.Column
                title="数据库模型版本号"
                dataIndex="versionNo"
                align="center"
                render={(_, record, index) => (
                    <Button
                        theme="borderless"
                        onClick={() =>
                            openUpdateApplicationDatabaseModal({
                                application,
                                record,
                                index,
                                appDatabases: state.appDatabases,
                                addDatabase,
                                reloadData,
                            })
                        }
                    >
                        {_}
                    </Button>
                )}
            />
            <Table.Column
                title="操作"
                align="center"
                width={120}
                render={(_, r) => (
                    <Space size={0} split={<Divider type="vertical" />}>
                        <Popconfirm
                            title="确认要移除该依赖的数据库信息吗?"
                            okButtonProps={{
                                loading: state.submitLoading,
                            }}
                            placement="topRight"
                            onConfirm={() => removeDatabase(r)}
                        >
                            <Button theme="borderless" icon={<IconDelete style={{ color: "#E91E63" }} />}></Button>
                        </Popconfirm>
                    </Space>
                )}
            />
        </Table>
    );
};

export default DependentedDatabases;
